import React, { Component } from "react";
import axios from "axios";
class Welcome extends Component {
  constructor(props) {
    super(props);
    // 设置 initial state
    this.state = {
      answer: [],
      create: [],
      answerNumber: 0,
      questionnaireNumber: 0
    };
  }
  componentDidMount() {
    var _this = this;
    axios
      .get("http://localhost:7952/api/SystemsAnalysis/GetAnswerSituation/")
      .then(function(response) {
        _this.setState({ answer: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
    axios
      .get("http://localhost:7952/api/SystemsAnalysis/GetCreateSituation/")
      .then(function(response) {
        _this.setState({ create: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
    axios
      .get("http://localhost:7952/api/SystemsAnalysis/GetAnswerNumber/")
      .then(function(response) {
        _this.setState({ answerNumber: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
    axios
      .get("http://localhost:7952/api/SystemsAnalysis/GetQuestionnaireNumber/")
      .then(function(response) {
        _this.setState({ questionnaireNumber: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }
  componentDidUpdate() {
    var _this = this;
    var activity = document.getElementById("activity");
    var activityData = {
      labels: ["星期一", "星期二", "星期三", "星期四", "星期五"],
      datasets: [
        {
          label: "周统计填写情况",
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
          ],
          borderColor: [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
          ],
          borderWidth: 1,
          data: _this.state.answer
        }
      ]
    };
    var myBarChart = new Chart(activity, {
      type: "bar",
      data: activityData
    });
    var login = document.getElementById("login");
    var loginData = {
      labels: ["周一", "周二", "周三", "周四", "周五"],
      datasets: [
        {
          data: _this.state.create,
          backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
          hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
        }
      ]
    };
    var myPieChart = new Chart(login, {
      type: "pie",
      data: loginData
    });
  }
  render() {
    return (
      <div className="content-wrapper">
        <section
          className="content"
          style={{
            minHeight: 650
          }}
        >
          <div>
            <section className="content-header">
              <h1>
                起始页
                <small>欢迎使用</small>
              </h1>
              <ol className="breadcrumb">
                <li>
                  <a href="#">
                    <i className="fa fa-dashboard" />
                    Stage
                  </a>
                </li>
                <li>
                  <a href="#">后台管理</a>
                </li>
                <li className="active">概览</li>
              </ol>
            </section>
            <br />
            <div
              className="box"
              style={{
                minHeight: 530
              }}
            >
              <div className="box-header with-border">
                <h3 className="box-title">起始页</h3>
                <div className="box-tools pull-right">
                  <span className="label label-primary">概览</span>
                </div>
              </div>
              <div className="box-body">
                <div className="row">
                  <section className="col-lg-5 connectedSortable">
                    <div className="nav-tabs-custom">

                      <ul className="nav nav-tabs pull-right">
                        <li className="active">
                          <a href="#revenue-chart" data-toggle="tab">填写统计</a>
                        </li>

                        <li className="pull-left header">
                          <i className="fa fa-inbox" />
                          问卷填写
                        </li>
                      </ul>
                      <div className="tab-content no-padding">

                        <div
                          className="chart tab-pane active"
                          id="revenue-chart"
                          style={{
                            position: "relative",
                            height: "300px"
                          }}
                        >
                          <div
                            style={{
                              width: "60%",
                              height: "100%"
                            }}
                          >
                            <canvas id="activity" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                  <section className="col-lg-5 connectedSortable">
                    <div className="nav-tabs-custom">

                      <ul className="nav nav-tabs pull-right">
                        <li className="active">
                          <a href="#revenue-chart1" data-toggle="tab">创建统计</a>
                        </li>

                        <li className="pull-left header">
                          <i className="fa fa-inbox" />
                          问卷创建
                        </li>
                      </ul>
                      <div className="tab-content no-padding">

                        <div
                          className="chart tab-pane active"
                          id="revenue-chart1"
                          style={{
                            position: "relative",
                            height: "300px"
                          }}
                        >
                          <div
                            style={{
                              width: "50%",
                              height: "50%"
                            }}
                          >
                            <canvas id="login" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
              <div className="col-lg-3 col-xs-6">
                <div className="small-box bg-green">
                  <div className="inner">
                    <h3>
                      {this.state.answerNumber}
                      <sup style={{ fontSize: 20 }}></sup>
                    </h3>

                    <p>答案总数</p>
                  </div>
                  <div className="icon">
                    <i className="ion ion-stats-bars" />
                  </div>
                  <a
                    href="http://localhost:8080/#/ViewAnswers"
                    className="small-box-footer"
                  >
                    查看详情 <i className="fa fa-arrow-circle-right" />
                  </a>
                </div>
              </div>
              <div style={{ marginLeft: "17%" }} className="col-lg-3 col-xs-6">
                <div className="small-box bg-aqua">
                  <div className="inner">
                    <h3>{this.state.questionnaireNumber}</h3>
                    <p>问卷总数</p>
                  </div>
                  <div className="icon">
                    <i className="ion ion-bag" />
                  </div>
                  <a
                    href="http://localhost:8080/#/ModifyQuestionnaire"
                    className="small-box-footer"
                  >
                    查看详情 <i className="fa fa-arrow-circle-right" />
                  </a>
                </div>
              </div>
              <div className="box-footer" />

            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default Welcome;
